<template>
  <div>
    <a-card :title="this.$t('hotel_info')">
      <template #extra>
        <a-space>
          <a-button type="primary" icon="upload" @click="pushHotel" :loading="confirmLoading">{{ $t('push_hotel')}}</a-button>
          <a-button type="danger" icon="delete" @click="pushDeleteHotel" :loading="confirmLoading">{{ $t('push_delete_hotel')}}</a-button>
          <a-button type="primary" icon="pull-request" @click="queryPush" :loading="confirmLoading">{{ $t('query_push')}}</a-button>
          <a-button icon="reload" @click="fetchData" :loading="loading">{{ $t('refresh') }}
          </a-button>
        </a-space>
      </template>

      <a-descriptions bordered size="small">
        <a-descriptions-item :label="$t('hotel_id')">{{ this.$props.HotelId }}</a-descriptions-item>
        <a-descriptions-item :label="$t('distributor_hotel_id')">{{ hotelInfo.distributor }} {{ hotelInfo.distributorHotelId }} {{ hotelInfo.distributorHotelId1 }}</a-descriptions-item>
        <a-descriptions-item :label="$t('distributor_city_name')">{{ hotelInfo.distributorCityId }} {{ hotelInfo.distributorCityName }}</a-descriptions-item>
        <a-descriptions-item :label="$t('push_status')">{{ $t("push_status_arr." + hotelInfo.pushStatus) }}</a-descriptions-item>
        <a-descriptions-item :label="$t('push_result')">{{ $t("push_result_arr." + hotelInfo.pushResult) }}</a-descriptions-item>
        <a-descriptions-item :label="$t('sale_status')">
          <a-icon :type="hotelInfo.isonline == 1?'check-circle':'close-circle'" :style="hotelInfo.isonline == 1?'color:#52c41a;font-size: 18px;':'font-size: 18px;'"/></a-descriptions-item>
        <a-descriptions-item :label="$t('push_error')">{{ hotelInfo.pushError }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('hotel_name')">{{ hotelInfo.hotelNameEn }}<br/>{{ hotelInfo.hotelNameCn }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('city')">{{ hotelInfo.countryCode }}.{{ hotelInfo.countryName }} <br /> {{ hotelInfo.provinceCode }}.{{ hotelInfo.provinceName }} <br /> {{ hotelInfo.cityCode }}.{{ hotelInfo.cityName }} <br /> {{ hotelInfo.zoneCode }}.{{ hotelInfo.zoneName }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('address')">{{ hotelInfo.hotelAddressEn }} <br /> {{ hotelInfo.hotelAddressCn }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('hotel_star')"><a-rate :value="hotelInfo.hotelStar" disabled /></a-descriptions-item>
        <a-descriptions-item :label="this.$t('tel')">{{ hotelInfo.hotelTel }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card :title="this.$t('room_info')">
      <template #extra>
        <a-space>
          <a-button type="primary" icon="upload" @click="pushRoom" :loading="confirmLoading">{{ $t('push_room')}}</a-button>
        </a-space>
      </template>

      <a-table :bordered="false" size="small" :columns="columns" :data-source="roomList"
               :row-key="record => record.roomId"
               :loading="loading" :pagination="false">
        <template slot="roomNameEn" slot-scope="text, record">
          {{ record.roomNameEn }} <br/> {{ record.roomNameCn }}
        </template>
        <template slot="distributorRoomId" slot-scope="text,record">
          {{ text }} <br /> {{ record.distributorRoomId1 }}
        </template>
        <template slot="pushStatus" slot-scope="text">
          {{ $t("push_status_arr." + text)}}
        </template>
        <template slot="pushResult" slot-scope="text">
          {{ $t("push_result_arr." + text)}}
        </template>
        <template slot="bed" slot-scope="text, record">
          <room-beds :bed-list="record.roomBeds"/>
        </template>
        <a-icon slot="status" slot-scope="text" :type="text?'check-circle':'close-circle'"
                :style="text?'color:#52c41a;font-size: 18px;':'font-size: 18px;'"/>
        <template v-for="(item, index) in columns" :slot="item.slotName">
          <span :key="index">{{ $t(item.slotName) }}</span>
        </template>
      </a-table>

    </a-card>
  </div>
</template>

<script>
import { getHotel, getRoomList, pushHotelInfo, pushDeleteHotel, pushRoomInfo, queryPushResult } from '@/services/distributor'
import RoomBeds from "../hotel/roombeds";

export default {
  name: "PushInfo",
  props: ['Distributor','HotelId'],
  components: {RoomBeds},
  i18n: require('../i18n'),
  data() {
    return {
      loading: false,
      confirmLoading: false,
      params: {
        distributor: this.$props.Distributor,
        hotelId: this.$props.HotelId
      },
      hotelInfo: {},
      roomList: [],
      columns: [
        {
          dataIndex: 'roomId',
          align: 'center',
          slotName: "room_id",
          slots: {title: 'room_id'},
        },
        {
          dataIndex: 'roomNameEn',
          align: 'left',
          slotName: "room_name",
          slots: {title: 'room_name'},
          scopedSlots: {customRender: 'roomNameEn'},
          sorter: (a, b) => a.roomNameEn.localeCompare(b.roomNameEn),
        }, {
          dataIndex: 'maxOccupancy',
          align: 'center',
          slotName: "max_occupancy",
          slots: {title: 'max_occupancy'},
        },
        {
          dataIndex: 'roomArea',
          align: 'center',
          slotName: "room_area",
          slots: {title: 'room_area'},
          sorter: (a, b) => parseInt(a.roomArea) - parseInt(b.roomArea),
        }, {
          dataIndex: 'roomBeds',
          align: 'left',
          slotName: "bed",
          slots: {title: 'bed'},
          scopedSlots: {customRender: 'bed'},
        },
        {
          dataIndex: 'roomStatus',
          align: 'center',
          slotName: "status",
          slots: {title: 'status'},
          scopedSlots: {customRender: 'status'},
        }, {
          dataIndex: 'distributorRoomId',
          align: 'left',
          slotName: "distributor_room_id",
          slots: {title: 'distributor_room_id'},
          scopedSlots: {customRender: 'distributorRoomId'},
        },
        {
          dataIndex: 'pushStatus',
          align: 'left',
          slotName: "push_status",
          slots: {title: 'push_status'},
          scopedSlots: {customRender: 'pushStatus'},
          sorter: (a, b) => a > b,
        },
        {
          dataIndex: 'pushResult',
          align: 'left',
          slotName: "push_result",
          slots: {title: 'push_result'},
          scopedSlots: {customRender: 'pushResult'},
          sorter: (a, b) => a > b,
        },
        {
          dataIndex: 'pushError',
          align: 'left',
          slotName: "push_error",
          slots: {title: 'push_error'},
        },
      ],
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      getHotel(this.params).then(res => {
        this.hotelInfo = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
      })
      getRoomList(this.params).then(res => {
        this.roomList = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
      })
    },
    pushHotel(){
      let self = this
      this.$confirm({
        title: this.$t('push_hotel') + "?",
        onOk() {
          self.confirmLoading = true
          pushHotelInfo(self.params).then(res => {
            if(res.data.success) {
              self.$message.success({content: self.$t('submitSuccess')})
              self.fetchData()
            }else{
              self.$message.error({content: self.$t(res.data.message)})
            }
            self.confirmLoading = false
          }).catch(error => {
            console.log(error)
          })
        },
      });
    },
    pushRoom(){
      let self = this
      this.$confirm({
        title: this.$t('push_room') + "?",
        onOk() {
          self.confirmLoading = true
          pushRoomInfo(self.params).then(res => {
            if(res.data.success) {
              self.$message.success({content: self.$t('submitSuccess')})
              self.fetchData()
            }else{
              self.$message.error({content: self.$t(res.data.message)})
            }
            self.confirmLoading = false
          }).catch(error => {
            console.log(error)
          })
        },
      });
    },
    pushDeleteHotel(){
      let self = this
      this.$confirm({
        title: this.$t('push_delete_hotel') + "?",
        onOk() {
          self.confirmLoading = true
          pushDeleteHotel(self.params).then(res => {
            if(res.data.success) {
              self.$message.success({content: self.$t('submitSuccess')})
              self.fetchData()
            }else{
              self.$message.error({content: self.$t(res.data.message)})
            }
            self.confirmLoading = false
          }).catch(error => {
            console.log(error)
          })
        },
      });
    },
    queryPush(){
      this.confirmLoading = true
      queryPushResult(this.params).then(res => {
        if(res.data.success) {
          this.$message.success({content: this.$t('submitSuccess')})
          this.fetchData()
        }else{
          this.$message.error({content: this.$t(res.data.message)})
        }
        this.confirmLoading = false
      }).catch(error => {
        console.log(error)
      })
    },
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>

</style>